﻿body {
    background: linear-gradient(to bottom, #232526, #414345);
    height: 100vh;
    width: 100vw;
    display: block;
    color: #fff;
    overflow:hidden;
}

    body:after {
        content: "";
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        box-sizing: border-box;
        filter: blur(50px);
        position: fixed;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }

.layui-card {
    background-color: rgba(0, 0, 0,0.3);
    margin: 10px;
    border: 1px solid rgba(255, 255, 255,0.2);
    transition: all linear 200ms;
}
.layui-card:hover {
    border-color: rgba(255, 255, 255,0.4);
    box-shadow: 0 5px 20px 0 rgba( 255, 255, 255, 0.2 );
}

.layui-card-header {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255,0.1)
}

.layui-card-body .line-char {
    margin-bottom: 5px;
    min-height: 80px;
}
.layui-layer {
    background-color: rgba(0, 0, 0,0.2) !important;
        border: 1px solid rgba(187,187,187, 0.1);
    box-shadow: 0 2px 20px 0 rgba( 187,187,187, 0.1 ) !important;
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}

    .layui-layer .layui-layer-title {
        color: #fff;
        border-bottom: 1px solid rgba(187,187,187, 0.2)
    }
.page {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    border-right: 4px solid transparent;
}

    .page:hover {
        overflow-y: scroll;
        border-right: 0px;
    }

    header {
        height: 30px;
        line-height: 30px;
        background-color: rgb(0, 0, 0,0.2);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1090;
        width: 100%;
    }

    header .layui-btn {
        border-color: transparent !important;
        color: #ccc;
    }

    header .region .layui-btn {
        height: 30px;
        background-color: transparent;
        line-height: 15px;
        padding-left:10px;
    }
        header .layui-btn-primary:hover {
            background-color: rgb(0, 0, 0,0.1);
        }

    header .layui-btn-group {
        background-color: rgb(0, 0, 0,0.0);
    }
.layui-dropdown {
    background-color: rgb(255, 255, 255,0.1);
    border: none;
    color: #fff;
    box-shadow: 0 2px 20px 0 rgba( 255, 255, 255, 0.05 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}
.glass {
    box-shadow: 0 8px 20px 0 rgba( 255, 255, 255, 0.05 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}
    .layui-dropdown .layui-menu {
        background-color: transparent;
    }
        .layui-dropdown .layui-menu .layui-menu-body-title {
            color: #fff;
        }
        .layui-dropdown .layui-menu li:hover {
            background-color: rgb(255, 255, 255,0.1);
        }
a {
    -webkit-app-region: no-drag;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-row-between {
    justify-content: space-between;
}

.flex-1 {
    flex: 1;
}

.drag {
    -webkit-app-region: drag;
}

.text-color-white {
    color: #fff;
}

.text-color-red {
    color: #FF5722 !important;
}

.text-color-orange {
    color: #FFB800 !important;
}

.text-color-green {
    color: #009688 !important;
}

.text-color-cyan {
    color: #9f9f9f !important;
}

.text-color-blue {
    color: #01AAED !important;
}

.text-color-black {
    color: #2F4056 !important;
}

.layui-card-footer {
    border-top: 1px solid rgb(210 210 210 / 0.1);
    padding: 10px 15px;
    font-size: 12px;
    color: #808080
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}
::-webkit-scrollbar-thumb {
    background: transparent;
}

:hover::-webkit-scrollbar-thumb {
    background: rgba(146,146,146,0.2);
}

:hover::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)
}

::-webkit-scrollbar {
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
    padding-top: 30px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 3px;
}
